<template>
	<view>
		<view class="">
			<view class="my-top-box">
				<!-- <image class="wh-100" src="../../../static/icon/myIcon/my-top-bj.png" mode=""></image> -->
				<view class="my-top-box-1 flex-js-as-fc">
					<view class="my-top-user-box flex-ac">
						<image src="../../../static/19.png" mode=""></image>
						<view class="top-text-box flex-jc-as-fc">
							<text class="text-38-5b5555-b" @click="navgatLogin">她夏了夏天</text>
							<text class="text-24-7B7B7B">账号：GUY356895</text>
						</view>
						<u-icon class="my-top-sz-icon" name="setting-fill" color="#FFFFFF" size="34"></u-icon>
					</view>
					<view class="flex-j-sa-ac top2-text-box">
						<view class="user-top-box flex-jc-ac-fc">
							<text>2300</text>
							<text>粉丝</text>
						</view>
						<view class="my-line"></view>
						<view class="user-top-box flex-jc-ac-fc">
							<text>2300</text>
							<text>关注</text>
						</view>
						<view class="my-line"></view>
						<view class="user-top-box flex-jc-ac-fc">
							<text>2300</text>
							<text>获赞</text>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="my-center-box">
					<view class="my-center-item-box flex-jc-ac-fc" v-for="(columnItem,index) in myColumnList" :key="index">
						<image :src="columnItem.iconImg" mode=""></image>
						<text class="text-24-0f0f0f-b">{{columnItem.columnName}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="my-bottom-box mg-lr-25">
				<image src="../../../static/19.png" mode=""></image>
				<view class="my-bottom-text-box wh-100 flex-jc-as-fc">
					<text class="text-36-ffffff-b">人气新品</text>
					<text class="text-24-ffffff">更多活动等你来体验</text>
				</view>
				
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myColumnList:[
					{
						iconImg:require("../../../static/icon/myIcon/myIcon1.png"),
						columnName:"我的足迹"
					},{
						iconImg:require("../../../static/icon/myIcon/myIcon2.png"),
						columnName:"提出的问题"
					},{
						iconImg:require("../../../static/icon/myIcon/myIcon3.png"),
						columnName:"回答的问题"
					},{
						iconImg:require("../../../static/icon/myIcon/myIcon4.png"),
						columnName:"我的草稿"
					}
					// ,{
					// 	iconImg:require("../../../static/icon/myIcon/5.png"),
					// 	columnName:"我的团队"
					// },{
					// 	iconImg:require("../../../static/icon/myIcon/6.png"),
					// 	columnName:"浏览历史"
					// },{
					// 	iconImg:require("../../../static/icon/myIcon/7.png"),
					// 	columnName:"邀请好友"
					// },{
					// 	iconImg:require("../../../static/icon/myIcon/8.png"),
					// 	columnName:"意见反馈"
					// }
				]
			}
		},
		methods: {
			navgatLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
		}
	}
</script>

<style scoped>
	page{
		background-color: #EBEBEB;
	}
	.my-top-box{
		height: 293rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		background: #FFFFFF;
		box-shadow: 0px 4px 10rpx 0px rgba(6, 0, 1, 0.16);
		border-radius: 41px;
		border-radius: 20rpx;
		position: relative;
		margin-top: 20rpx;
	}
	.my-top-box > image:nth-of-type(1){
		position: absolute;
		left: 0;
		top: 0;
		/* z-index: -1; */
	}
	.my-top-box-1{
		/* margin-left: 50rpx; */
	}
	.my-top-user-box{
		width: 100%;
		position: relative;
		margin-top: 20rpx;
	}
	.top-text-box{
		margin-left: 30rpx;
	}
	.top-text-box >text:nth-child(1){
		margin-bottom: 20rpx;
	}
	
	.my-top-user-box >image:nth-of-type(1){
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
		margin-left: 77rpx;
		/* margin-top: 70rpx; */
	}
	.my-top-content-box{
		z-index: 1;
		height: 100%;
	}
	.my-top-content-text-box{
		margin-top: 40rpx;
	}
	.my-top-content-text-box >text:nth-of-type(2){
		opacity: 0.5;
		margin-top: 14rpx;
	}
	.my-top-bottom-box{
		margin-top: 150rpx;
		
	}
	.td-box > :nth-child(1){
		margin-right: 10rpx;
		margin-bottom: 30rpx;
	}
	.my-top-sz-icon{
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	
	.my-center-box{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-template-rows: repeat(1,1fr);
		row-gap: 70rpx;
		margin-bottom: 78rpx;
		margin-top: 70rpx;
		background-color: #FFFFFF;
		margin-left: 25rpx;
		margin-right: 25rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 26rpx 1rpx rgba(4, 0, 0, 0.03);
	}
	.my-center-item-box{
		
	}
	.my-line{
		height: 37rpx;
		width: 2rpx;
		background-color: #2B5DAC;
	}
	.top2-text-box{
		width: 100%;
		height: 100%;
		/* border: 1rpx solid red; */
	}
	.user-top-box{
		margin-top: 40rpx;
		height: 100%;
		width: 100%;
	}
	
	.my-center-item-box >image{
		height: 60rpx;
		width: 60rpx;
		margin-top: 20rpx;
	}
	.my-center-item-box >text{
		margin-top: 28rpx;
		margin-bottom: 30rpx;
	}
	
	.my-bottom-box{
		height: 300rpx;
		position: relative;
	}
	.my-bottom-box >image{
		height: 100%;
		width: 100%;
	}
	.my-bottom-text-box{
		position: absolute;
		top: 0;
		left: 0;
	}
	.my-bottom-text-box >text{
		margin-left: 45rpx;
	}
	.my-bottom-text-box >text:nth-of-type(2){
		margin-top: 42rpx;
	}

</style>
